<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>main3</title>
    <link rel="stylesheet" href="../plugin/seedsui/seedsui.min.css">
    <style>
        .newlist li:not(.noclick) .justify-content{
            height:74px;
        }
    </style>
</head>

<body>
    <section id="page_container" class="active">
    	<header>
            <ul class="tabbar animate-slide width-full" data-col="5" id="tabbar">
                <li class="tab active">
                    <label class="tab-label">头条</label>
                </li>
                <li class="tab">
                    <label class="tab-label">推荐</label>
                </li>
                <li class="tab">
                    <label class="tab-label">科技</label>
                </li>
                <li class="tab">
                    <label class="tab-label">舆情</label>
                </li>
                <li class="tab">
                    <label class="tab-label">动态</label>
                </li>
                <hr/>
            </ul>
        </header>
    	<article style="top:40px;bottom:54px;">
            <div class="slider-container" id="carouselPage" style="height: 100%;">
                <div class="slider-wrapper">
                    <div class="slider-slide">
                        <!--banner:start-->
                        <div class="slider-container" id="carousel1">
                            <div class="slider-wrapper">
                                <div class="slider-slide">
                                    <img src="../img/main5/bannerh.jpg" style="width:100%;">
                                    <div class="slide-title">新闻标题1</div>
                                </div>
                                <div class="slider-slide">
                                    <img src="../img/main5/bannerh.jpg" style="width:100%;">
                                    <div class="slide-title">新闻标题2</div>
                                </div>
                                <div class="slider-slide">
                                    <img src="../img/main5/bannerh.jpg" style="width:100%;">
                                    <div class="slide-title">新闻标题3</div>
                                </div>
                            </div>
                            <div class="slider-pagination"></div>
                        </div>
                        <!--banner:end-->
                        <!--最新资讯:start-->
                        <ul class="list newlist">
                            <li class="noclick">
                                <div class="justify">
                                    <span class="peg"></span>
                                </div>
                                <div class="justify-content">最新资讯</div>
                                <small class="justify">
                                        <label>更多</label>
                                        <i class="icon icon-arrowbittoright"></i>
                                </small>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                        </ul>
                        <!--最新资讯:end-->
                    </div>
                    <div class="slider-slide">
                        <!--最新资讯:start-->
                        <ul class="list newlist">
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                        </ul>
                        <!--最新资讯:end-->
                    </div>
                    <div class="slider-slide">
                        <!--最新资讯:start-->
                        <ul class="list newlist">
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                        </ul>
                        <!--最新资讯:end-->
                    </div>
                    <div class="slider-slide">
                        <!--最新资讯:start-->
                        <ul class="list newlist">
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                        </ul>
                        <!--最新资讯:end-->
                    </div>
                    <div class="slider-slide">
                        <!--最新资讯:start-->
                        <ul class="list newlist">
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                            <li>
                                <div class="justify">
                                    <img src="../img/main5/listimg.png">
                                </div>
                                <div class="justify-content">
                                    <p>公益15载  阳光助学再升级</p>
                                    <small class="bottom left">12-24</small>
                                    <small class="bottom right">
                                        <label><span class="color-warn">42</span>浏览</label>
                                    </small>
                                </div>
                            </li>
                        </ul>
                        <!--最新资讯:end-->
                    </div>
                </div>
            </div>
	    </article>
        <footer>
            <ul class="menubar">
                <li class="tab active">
                    <i class="icon icon-home-fill"></i>
                    <label class="tab-label">首页</label>
                </li>
                <li class="tab">
                    <i class="icon icon-chattip"></i>
                    <label class="tab-label">消息</label>
                </li>
                <li class="tab">
                    <i class="icon icon-contact"></i>
                    <label class="tab-label">通讯录</label>
                </li>
                <li class="tab">
                    <i class="icon icon-app"></i>
                    <label class="tab-label">工作台</label>
                </li>
            </ul>
        </footer>
    </section>
    
    <script src="../plugin/jquery/jquery.min.js"></script>
    <script src="../plugin/seedsui/seedsui.min.js"></script>
    <script type="text/javascript">
        var tabbar=document.getElementById("tabbar");
        var tab=tabbar.querySelectorAll(".tab");
        var carouselPage;
        //初始化滑动容器
        function initSlider(){
            carouselPage=new Slider("#carouselPage",{
                "onSlideChangeEnd":function(e){
                    tabActive(e.index);
                }
            });
            var carousel1=new Slider("#carousel1",{
                "pagination":".slider-pagination"
            });
        }
        //选中tab
        function tabActive(index){
            for(var i=0,t;t=tab[i++];){
                t.classList.remove("active");
            }
            tab[index].classList.add("active");
        }
        //绑定tab点击事件
        function tabBindClick(){
            for(var i=0,t;t=tab[i++];){
                (function(i){
                    t.addEventListener("click",function(){
                        carouselPage.slideTo(i-1);
                        tabActive(i-1);
                    },false);
                })(i);
            }
        }
        window.addEventListener("load",function(){
            initSlider();
            tabBindClick();
        },false);
        //定义exmobi返回
    	function back(){history.go(-1);}
    </script>
</body>
</html>
